<template>
	<view class="page-box">
		<view  class="addr-box" @click="ChooseAddr()">
			<image src="../../static/image/address.png"></image>
			<view  v-if="addrlist.name == ''">点击选择收货地址</view>
			<view v-if="addrlist.name != ''" class="add-text">
				<view>{{addrlist.name}}<text style="color: #BCB9B9;">{{addrlist.tel}}</text></view>
				<view>{{addrlist.addr}}</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="detail-box">
			<view class="title">订单信息</view>
			<view class="detail">
				<image :src="detail.image"></image>
				<view class="info">
					<view class="title">{{detail.title}}</view>
					<view class="info-text">购买数量：1</view>
				</view>
			</view>
		</view>
		<view class="price-box">
			<view class="left">
				<view>商品价格</view>
				<view>{{detail.price}}</view>
			</view>
			<view class="left">
				<view>运费</view>
				<view>10.00</view>
			</view>
			<view class="left">
				<view>折扣</view>
				<view>0.00</view>
			</view>
			<view class="left">
				<view>优惠券</view>
				<view>暂无优惠券</view>
			</view>
		</view>
		<view class="total">合计<text style="color: #EA5B0C;font-size: 40rpx;">￥{{detail.price}}</text></view>
		<view class="btn-box">
			<view class="btn" @click="pay(detail.image,detail.title,detail.price,detail.num)">确认</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad(e) {
			console.log(this.$store.state.addrlist)
			console.log('省市区', this.$store.state.detail)
		},
		computed: {
			addrlist() {
				return this.$store.state.addrlist || ''
			},
			detail(){
				return this.$store.state.detail || ''
			}
		},
		methods: {
			ChooseAddr(){
				uni.navigateTo({
					url:'/pages/my/address-list'
				})
			},
			pay(image,title,price,num){
				var myDate = new Date();
				var date =  myDate.toLocaleDateString();     //获取当前日期 
				var mytime = myDate.toLocaleTimeString();    //获取当前时间 
				var Createdate = date+mytime
				console.log(image,title,price,num)
				uni.showModal({
				    title: '温馨提示',
				    content: '请您核对好信息后付款',
					confirmText:'确定',
					cancelText:'取消',
					confirmColor:'#ff6633',
				    success: function (res) {
				        if (res.confirm) {
							uniCloud.callFunction({
								name:'AddOrder',
								data:{
									title:title,
									image:image,
									price:price,
									num:num,
									status:'待发货',
									date:Createdate,
								},
								success: (rest) => {
									uni.showToast({
									    title: '支付成功',
									    duration: 2000,
										icon:'none'
									});
									setTimeout( () => {
									  uni.redirectTo({
									  	url:"/pages/order/order-list"
									  })
									}, 2000)
								},
								fail: (err) => {
									console.log('取消失败',err)
								}
							})	
							
				        } else if (res.cancel) {
				            console.log('用户点击取消');
							uniCloud.callFunction({
								name:'AddOrder',
								data:{
									title:title,
									image:image,
									price:price,
									num:num,
									status:'取消支付',
									date:Createdate,
								},
								success: (rest) => {
									uni.showToast({
									    title: '取消支付',
									    duration: 2000,
										icon:'none'
									});
									setTimeout( () => {
									  uni.redirectTo({
									  	url:"/pages/order/order-list"
									  })
									}, 2000)
								},
								fail: (err) => {
									console.log('取消失败',err)
								}
							})
				        }
				    }
				});
				}
				
		}
	}
</script>

<style scoped lang="scss">
	.page-box{
		background-color: #FFFFFF;
		}
	.addr-box{
		background-color: #FFFFFF;
		padding:34rpx 40rpx ;
		display: flex;
		flex-direction: row;
		align-items: center;
		image{
			width: 56rpx;
			height: 56rpx;
			}
		}
	.line{
		height: 16rpx;
		background-color:#F5F5F5;
		width: 100%;
		}
	.add-text{
		margin-left: 50rpx;
		width: 550rpx;
		display: flex;
		flex-direction:column;
		font-size: 28rpx;
		font-weight: 400;
		line-height:42rpx;
		color: #000000;
		opacity: 1;
		}
	.detail-box{
		background-color: #FFFFFF;
		padding: 36rpx 40rpx;
		}
	.title{
		font-size: 30rpx;
		font-weight: 600;
		line-height: 40rpx;
		color: #000000;
		opacity: 1;
		}
	.detail{
		padding: 50rpx 0rpx;
		display: flex;
		flex-direction:row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #ECECEC;
		image{
			width:220rpx;
			height:180rpx;
			border-radius: 12rpx;
			}
		}
	.info{
		width: 400rpx;
		}
	.info-text{
		font-size: 24rpx;
		font-weight: 400;
		line-height:40rpx;
		color: #BCBCBC;
		opacity: 1;
		margin-top: 20rpx;
		}
	.price-box{
		padding:55rpx 40rpx;
		}
	.left{
		display: flex;
		flex-direction:row;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 40rpx;
		color: #000000;
		opacity: 1;
		margin-bottom: 26rpx;
		}
	.total{
		padding:40rpx;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 40rpx;
		color: #000000;
		opacity: 1;
		display: flex;
		justify-content: flex-end;
		}
	.btn-box{
		border-top: 1rpx solid #F5F5F5;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		padding: 30rpx 125rpx;
		}
	.btn{
		background: #ff6633;
		border-radius: 20rpx;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 48rpx;
		color: #FFFFFF;
		opacity: 1;
		padding: 16rpx 0rpx;
		text-align: center;
		}
</style>
